<template>
  <view class="container">
    <view class="detail-card">
      <view class="notice-header">
        <text class="notice-title">{{ noticeDetail.title }}</text>
        <text class="notice-date">{{ noticeDetail.date }}</text>
      </view>
      <view class="notice-content">
		<uv-parse :content="noticeDetail.content"></uv-parse>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import '@/styles/common.scss';

.detail-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 40rpx 32rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.guide-header {
  margin-bottom: 40rpx;
  border-bottom: 2rpx solid #edf2f7;
  padding-bottom: 24rpx;
}

.guide-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #2d3748;
  display: block;
  margin-bottom: 16rpx;
  line-height: 1.4;
}

.guide-date {
  font-size: 24rpx;
  color: #718096;
  display: block;
}

.guide-content {
  font-size: 28rpx;
  color: #4a5568;
  line-height: 1.8;

  :deep(p) {
    margin-bottom: 20rpx;
  }

  :deep(p:first-child) {
    font-size: 32rpx;
    font-weight: bold;
    color: #2d3748;
    margin-bottom: 24rpx;
  }
}
</style>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getNoticeDetail } from '@/api/notice'

const noticeDetail = ref({
  id: 0,
  title: '',
  date: '',
  content: ''
})

// 获取办事指南详情
const fetchNoticeDetail = async (id) => {
  try {
    const res = await getNoticeDetail(id)
    if (res.code === 200 && res.data) {
      noticeDetail.value = {
        id: res.data.noticeId,
        title: res.data.noticeTitle,
        date: res.data.createTime ? res.data.createTime.substring(0, 16).replace('T', ' ') : '',
        content: res.data.noticeContent
      }
    } 
  } catch (error) {
    console.error('获取失败', error)
  }
}

// 页面加载时获取详情数据
onLoad((options) => {
  const id = options.noticeId
  if (id) {
    fetchNoticeDetail(id)
  }
})
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f5f6fa;
  min-height: 100vh;
}

.detail-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.notice-header {
  margin-bottom: 30rpx;
  border-bottom: 2rpx solid #f5f5f5;
  padding-bottom: 20rpx;
}

.notice-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 15rpx;
  line-height: 1.4;
}

.notice-date {
  font-size: 24rpx;
  color: #999;
  display: block;
}

.notice-content {
  font-size: 28rpx;
  color: #333;
  line-height: 1.8;
}
</style>
